<template>
	<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
		<el-form-item class="form-button-right">
			<el-button v-auth="'staff:record:save'" type="primary" class="form-button-visibility">新增</el-button>
			<el-button v-auth="'staff:record:save'" type="" class="form-button-visibility">导入</el-button>
			<el-button v-auth="'staff:record:save'" type="" @click="addOrUpdateHandle()">导出</el-button>
			<el-button v-auth="'staff:record:delete'" type="" @click="deleteBatchHandle()">更多操作</el-button>
		</el-form-item>
		<el-form-item>
			<el-tree-select
				v-model="state.queryForm.zhiwei"
				:data="typeList"
				value-key="id"
				check-strictly
				clearable
				:render-after-expand="false"
				:props="{ value: 'id', label: 'name', children: 'children' }"
				placeholder="入职部门"
			/>
		</el-form-item>
		<el-form-item>
			<el-tree-select
				v-model="state.queryForm.zhiwu"
				:data="typeList"
				value-key="id"
				check-strictly
				clearable
				:render-after-expand="false"
				:props="{ value: 'id', label: 'name', children: 'children' }"
				placeholder="入职职位"
			/>
		</el-form-item>
		<el-form-item>
			<el-date-picker
				type="daterange"
				v-model="state.queryForm.time"
				is-range
				range-separator="~"
				start-placeholder="预计入职日期"
				end-placeholder="预计入职日期"
			/>
		</el-form-item>
		<el-form-item>
			<el-tree-select
				v-model="state.queryForm.zhiji"
				:data="typeList"
				value-key="id"
				check-strictly
				clearable
				:render-after-expand="false"
				:props="{ value: 'id', label: 'name', children: 'children' }"
				placeholder="员工类型"
			/>
		</el-form-item>
		<el-form-item>
			<el-select v-model="state.queryForm.bumen" clearable placeholder="入职登记状态"></el-select>
		</el-form-item>
		<el-form-item>
			<el-tree-select
				v-model="state.queryForm.workplace"
				:data="typeList"
				value-key="id"
				check-strictly
				clearable
				:render-after-expand="false"
				:props="{ value: 'id', label: 'name', children: 'children' }"
				placeholder="员工来源"
			/>
		</el-form-item>
		<el-form-item>
			<el-input v-model="state.queryForm.name" placeholder="请输入关键字" clearable>
				<template #append>
					<el-button :icon="Search" @click="getDataList()" />
				</template>
			</el-input>
		</el-form-item>
	</el-form>
	<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
		<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
		<el-table-column prop="id" label="主键" header-align="center" align="center" v-if="false"></el-table-column>

		<el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
		<el-table-column prop="code" label="入职部门" header-align="center" align="center"></el-table-column>
		<el-table-column prop="organName" label="入职职位" header-align="center" align="center"></el-table-column>
		<el-table-column prop="phone" label="手机号码" header-align="center" align="center"></el-table-column>
		<el-table-column prop="positionName" label="原定入职日期" header-align="center" align="center"></el-table-column>

		<el-table-column prop="typeName" label="放弃原因" header-align="center" align="center"></el-table-column>
		<el-table-column prop="stateName" label="备注" header-align="center" align="center"></el-table-column>
		<el-table-column prop="type" label="来源" header-align="center" align="center"></el-table-column>
		<el-table-column prop="hiredate" label="添加人" header-align="center" align="center"></el-table-column>

		<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
			<template #default="scope">
				<el-button v-auth="'staff:staff:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id)">确认入职</el-button>
				<el-button v-auth="'staff:staff:delete'" type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		:current-page="state.page"
		:page-sizes="state.pageSizes"
		:page-size="state.limit"
		:total="state.total"
		layout="total, sizes, prev, pager, next, jumper"
		@size-change="sizeChangeHandle"
		@current-change="currentChangeHandle"
	>
	</el-pagination>

	<!-- 弹窗, 新增 / 修改 -->
	<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
</template>

<script setup lang="ts" name="EntryIndex">
import { useCrud } from '@/hooks'
import { Ref, reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from '@/views/nb/staff/add-or-update.vue'

import { Search } from '@element-plus/icons-vue'

const state: IHooksOptions = reactive({
	dataListUrl: '/nb/staff/page',
	deleteUrl: '/nb/staff',
	queryForm: {}
})

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

const typeList = ref()

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>
